<template>
	<view class="pageStyle">
		<view class="form_conter">
			<uni-forms ref="form" :modelValue="model" :label-width="108">
				<uni-forms-item v-for="(item, index) in fields" :label="item.title" :key="index">
					<view v-if="item.type == 'text'">{{item.value}}</view>
					<view v-else-if="item.type == 'macro'" class="ver-item-center viewItem">
						<view v-if="item.macroCode == 'macro_raty'">
							<uni-rate active-color="#FFCA2A" v-model="item.value" :disabled="setDisabled"></uni-rate>
						</view>
						<view v-else-if="item.macroCode == 'macro_attachment'">
							<view style="margin-bottom:10rpx" v-for="(fi, fin) in fileList" :key="fin"
								@click="viewFile(fi, fin)">{{ fi.name }}</view>
						</view>
						<view v-else-if="item.macroCode == 'module_field_select'">
							{{item.value}}
						</view>
						<view v-else-if="item.macroCode == 'macro_ueditor'" v-html="item.value">

						</view>
						<view v-else>
							{{item.value}}
						</view>
					</view>
					<view v-else-if="item.type == 'DATE'">{{item.value}}</view>
					<view v-else-if="item.type == 'checkbox'" class="ver-item-center viewItem">
						{{item.value}}
					</view>
					<view v-else-if="item.type == 'textarea'">
						{{item.value}}
					</view>
					<view v-else-if="item.type == 'select'">
						{{item.value}}
					</view>

					<view v-else-if="item.type == 'DATE_TIME'">
						{{item.value}}
					</view>

					<view v-else>
						{{item.value}}
					</view>
				</uni-forms-item>
			</uni-forms>
		</view>
	</view>
</template>
<script>
	import {
		getAction,
		postAction
	} from '@/utils/request.js';
	import {
		Api
	} from '@/utils/Api.js';
	export default {
		components: {},
		data() {
			return {
				describe: '通用详情',
				model: {},
				url: {
					show: '/modular/show',
					visit: '/modular/visit',
					edit: '/modular/edit'
				},
				queryParams: {
					moduleCode: '',
					id: ''
				},
				fields: [],
				listRecord: {},
				setDisabled: false,
				fileList: [],
			};
		},
		onLoad(options) {
			this.model = JSON.parse(options.record);
			this.listRecord = options.listRecord ? JSON.parse(options.listRecord) : {};
			this.queryParams.moduleCode = this.model.code ? this.model.code : '';
			this.queryParams.id = this.model.id ? this.model.id : '';

			if (this.listRecord.mName) {
				//重定义头部
				uni.setNavigationBarTitle({
					title: this.listRecord.mName
				});
			}
			this.search();
		},
		methods: {
			search() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.setDisabled = false;
				getAction(this.url.show, this.queryParams)
					.then(res => {
						if (res.res == 0) {
							this.fields = res.fields.filter(el => el.code != 'cws_id');
							this.fields.forEach(item => {
								if (item.type == 'checkbox') {
									item.value = item.value == 1 ? true : false;
									this.setDisabled = item.value == 1 ? true : false;
								}
							});
							this.fileList = res.files && res.files.length > 0 ? res.files : [];
						} else {
							uni.showToast({
								icon: 'none',
								mask: false,
								title: '接口请求失败'
							});
						}
					})
					.finally(() => {
						uni.hideLoading();
					});
			},
			processingProgress() {
				uni.navigateTo({
					url: `/application/chilPage/chilPage/processingProgress?record=${JSON.stringify(this.model)}`
				});
			},
			//view文件
			viewFile(record) {
				let filePath = Api.baseUrl + record.url;
				let fileType = record.name.split('.')[1].toLowerCase();
				if (!fileType) {
					return;
				}
				uni.showLoading({
					title: '文件下载中'
				});
				uni.downloadFile({
					url: encodeURI(filePath), //注意中文文件名的网络地址需要encodeURI
					success(res) {
						uni.hideLoading();
						//预览图片或打开文件
						if (fileType == 'png' || fileType == 'jpg' || fileType == 'jpeg') {
							// 图片的话直接预览
							uni.previewImage({
								urls: [res.tempFilePath]
							});
							uni.hideLoading();
						} else {
							uni.openDocument({
								filePath: res.tempFilePath,
								success() {},
								fail(e) {
									uni.hideLoading();
									uni.showToast({
										icon: 'none',
										title: '文件打开失败！'
									});
								}
							});
						}
					},
					fail() {
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							title: '下载出错！'
						});
					},
					complete() {
						uni.hideLoading();
					}
				});
			},
			handleSave() {
				let param = {
					moduleCode: this.queryParams.moduleCode,
					id: this.queryParams.id,
					fields: this.fields
				};
				postAction(this.url.edit, param).then(res => {
					if (res.res == 0) {
						this.callBack();
					} else {
						uni.showToast({
							icon: 'none',
							mask: false,
							title: res.msg
						});
					}
				});
			},
			/*返回上一页*/
			callBack() {
				var pages = getCurrentPages();
				// var currPage = pages[pages.length - 1]; //当前页面
				var prevPage = pages[pages.length - 2]; //上一个页面
				//直接调用上一个页面的setData()方法，把数据存到上一个页面中去
				prevPage.isDoRefresh = true;
				this.model = {};
				uni.navigateBack();
				// prevPage.isDoRefresh = true;
			}
		}
	};
</script>
<style lang="scss" scoped>
	.pageStyle {
		padding: 20rpx 0;
		background-color: #f9f9f9;
		height: 100%;

		.viewItem {
			height: 100%;
		}

		.form_conter {
			padding: 0 20rpx;
			background-color: #ffffff;

			::v-deep .uni-forms-item {
				border-bottom: 1px #eee solid;
			}

			::v-deep .uni-forms-item__inner {
				padding: 20rpx 0;
			}
		}

		.color7d {
			color: #7d7d7d;
		}

		.colorblack {
			color: #000;
		}

		.body_top {
			background-color: #ffffff;
			padding: 20rpx;

			.body_top_bottom {
				font-size: 24rpx;
				padding: 20rpx;

				.bottom_info {
					width: 100;
					text-align: right;
				}
			}
		}

		.body_center {
			padding: 20rpx;
			background-color: #ffffff;

			.body_center_top {
				padding: 20rpx 0;

				.sub_title {
					padding-bottom: 20rpx;
				}

				.sub_con {
					font-size: 22rpx;
					font-weight: 400;
					color: #7d7d7d;
					line-height: 30rpx;
				}
			}

			.body_center_bottom {
				padding: 20rpx 0;

				.sub_title {
					padding-bottom: 20rpx;
				}

				.sub_con {
					font-size: 22rpx;
					font-weight: 400;
					color: #7d7d7d;
					line-height: 30rpx;
				}
			}
		}

		.body_bottom {
			position: fixed;
			bottom: 0;
			height: 100rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #31e6e1;
			background-color: #ffffff;
		}

		.uni-forms-item {
			margin-bottom: 20rpx;
			padding-bottom: 20rpx;
		}

		::v-deep .uni-forms-item__content {
			display: flex;
			align-items: center;
		}
	}
</style>